<template>
    <div>
        <div class="body-content">
            <div class="content-main" v-if="detail">
                <!-- 基本信息 start -->
                <div class="baseinfo w bd-r">
                    <div class="share adapt-m"></div>
                    <!-- 轮播 start -->
                    <div class="swiper-container swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide bg-img"  v-for="(item,index) in detail.bannerUrl" :key="index">
                                <img :src="getImage(item)"/>
                            </div>
                        </div>
                        <!-- 轮播-分页器 -->
                        <div class="swiper-pagination swiper-pagination-white"></div>
                        <!-- 轮播-导航按钮 -->
                        <!-- <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div> -->
                    </div>
                    <!-- 轮播 end -->
                    <div class="text">
                        <h1 class="title"><span class="content">{{detail.name}}</span></h1>
                        <div class="others">
                            <div class="info">
                                <ul class="flaglist clearfix">
                                    <li class="flagitem" v-for="item in detail.layout">{{item}}</li>
                                </ul>
                                <ul class="trendlist">
                                    <!-- <li class="trenditem">
                                        <p class="value stress">{{detail.yearRent}}</p>
                                        <p class="name">年均租金 <span style="width:20px;height:20px;"><i class="tip-icon tip-icon1"></i></span></p>
                                    </li>
                                    <li class="trenditem">
                                        <p class="value stress">{{detail.rise}}</p>
                                        <p class="name">近一年房价涨幅 <span><i class="tip-icon  tip-icon2"></i></span></p>
                                    </li> -->
                                    <li class="trenditem">
                                        <span class="name">使用面积</span>
                                        <span class="value"> {{detail.usedArea}}㎡</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="address">
                                <p>{{detail.address.split("###")[0]}}<br>{{detail.address.split("###")[1]}}</p>
                            </div>
                            <div class="price">
                                <span class="adapt-pc"></span>
                                <span class="value stress">{{detail.price.split("###")[0]}}</span>
                                <!-- ({{detail.price.split("###")[1]}}) -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 基本信息 end -->

                <!-- 分享展示 start -->
                <div id="share_show" class="share-show">
                    <div class="table">
                        <div class="table-cell">
                            <h2 class="title">已为您生成朋友圈海报<br>长按保存图片</h2>
                            <div class="box-img">
                                <i class="icon-guanbi close"></i>
                                <!--<img class="share-img" src="/Public/Home/houseshare/165.jpg">-->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分享展示 end -->

                <!-- 定制专属方案 start -->
                <div class="pro-ava adapt-pc">
                    <ul class="bd-r">
                        <li>
                            <img class="icon3" src="@/assets/picture/custom.png" alt="">
                            <span>定制专属移民方案</span>
                            <p>我们会根据您的条件给出优选方案</p>
                        </li>
                        <li><input type="text" name="nm" value="" placeholder="您的姓名" class="name" v-model="contacts">
                        </li>
                        <li><input type="number" name="ph" value="" placeholder="您的手机号" class="phone"
                                v-model="contactsPhone"><i class="error1 icon-tanhao-copy"></i></li>
                        <li>
                            <div class="btn btn-common" @click="save">提交</div>
                        </li>
                    </ul>
                </div>
                <!-- 定制专属方案 end -->

                <!-- 详细介绍 start -->
                <div class="moreinfo w">
                    <div class="left-side bd-r act-detail" style="width: 100%">
                        <div class="resource">
                            <h2 class="title">房源信息</h2>
                            <ul class="itemlist clearfix">
                                <li class="item"><span class="name">房型：</span>{{detail.layout[0]}}</li>
                                <li class="item"><span class="name">车位：</span>{{detail.parking}}</li>
                                <!-- <li class="item"><span class="name">住宅形式：</span>-</li> -->
                                <li class="item"><span class="name">内部结构：</span>{{detail.internalStructure}}</li>
                                <li class="item"><span class="name">楼层信息：</span>{{detail.floor}}</li>

                                <li class="item"><span class="name">产权：</span>{{detail.propertyAgeLimit}}</li>
                                <li class="item"><span class="name">房源类型：</span>{{detail.propertyType}}</li>
                                <!-- <li class="item"><span class="name">近一年房价涨幅：</span>{{detail.rise}}</li> -->
                                <li class="item block"><span class="name">区域：</span>{{detail.area}}</li>
                            </ul>
                        </div>
                        <div class="detail detail-left">
                            <h2 class="title">项目详情</h2>
                            <div class="content" v-html="detail.detail">

                            </div>

                        </div>
                        <div class="project" style="display: none;">
                            <h2 class="title">希腊移民项目</h2>
                            <a href="http://www.yimin11.com/gregei.html" target="_blank">
                                <div class="content">
                                    <div class="img bg-img bd-r"
                                        style="background-image: url('../Public/Admin/Uploads/2017-12-29/5a45eae366f6b.jpg');">
                                    </div>
                                    <div class="text">

                                        <p class="h1">希腊购房投资移民</p>

                                        <div class="clear">
                                            <span class="star_s star_5"></span>
                                        </div>
                                        <p class="cons">推荐理由：希腊风景优美，移民要求低，购房投资性价比高，三代移民，欧盟福利尽享，抄底希腊经济。</p>
                                        <p class="flaglist clear">
                                            <i class="flagitem " style="color:#fff; background-color:#9AE03F;"
                                                data-id="8">无居住要求</i><i class="flagitem "
                                                style=' color:#fff; background-color:#43CAFF;'
                                                data-id="19">3个月快速办理</i><i class="flagitem "
                                                style=' color:#fff; background-color:#F28B66;' data-id="22">全家移民</i><i
                                                class="flagitem " style=' color:#fff; background-color:#00D8C3;'
                                                data-id="26">购房移民</i><i class="flagitem "
                                                style=' color:#fff; background-color:#FFD527;' data-id="27">三代移民</i>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="right-side bd-r adapt-pc" style="display: none;">
                        <div class="interest bd-r" style="margin-top:0;">
                            <span class="block-title bd-r">你感兴趣的</span>
                            <!-- 循环 start -->

                            <a href="/Housedetail/163.html" target="_blank">
                                <div class="house">
                                    <div class="bg-img img bd-r"
                                        style="background-image: url(//www.yimin11.com/Public/Home/Uploads/20191022/1571728040762678.jpg);">
                                    </div>
                                    <h3 class="title">P city公寓</h3>
                                    <p class="info">／139㎡／
                                        公寓 </p>
                                    <p class="price"><span class="value stress">210万~255万</span>人民币</p>
                                </div>
                            </a><a href="/Housedetail/152.html" target="_blank">
                                <div class="house">
                                    <div class="bg-img img bd-r"
                                        style="background-image: url(//www.yimin11.com/Public/Home/Uploads/20190911/1568187323104752.jpg);">
                                    </div>
                                    <h3 class="title">雅典南部公寓</h3>
                                    <p class="info">1~3室／160㎡／
                                        公寓 </p>
                                    <p class="price"><span class="value stress">235万</span>人民币</p>
                                </div>
                            </a><a href="/Housedetail/149.html" target="_blank">
                                <div class="house">
                                    <div class="bg-img img bd-r"
                                        style="background-image: url(//www.yimin11.com/Public/Home/Uploads/20190906/1567762192926083.jpg);">
                                    </div>
                                    <h3 class="title">大阪市三层江景精装现房一户建</h3>
                                    <p class="info">1~6室／85.95㎡／
                                        公寓 </p>
                                    <p class="price"><span class="value stress">317万</span>人民币</p>
                                </div>
                            </a><a href="/Housedetail/147.html" target="_blank">
                                <div class="house">
                                    <div class="bg-img img bd-r"
                                        style="background-image: url(//www.yimin11.com/Public/Home/Uploads/20190905/1567650517611783.jpg);">
                                    </div>
                                    <h3 class="title">多特蒙德·四层公寓楼-后院另有二层楼</h3>
                                    <p class="info">15室3卫／307㎡／
                                        公寓 </p>
                                    <p class="price"><span class="value stress">336万</span>元</p>
                                </div>
                            </a>
                            <!-- 循环 end -->
                        </div>
                    </div>
                </div>
                <!-- 详细介绍 end -->
            </div>

            <div class="click-box" v-if="promptshow">
                <div>
                    <img src="@/assets/image/success.png" alt="" class="dui">
                    <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                    <span>您的私人规划师会在2小时内跟您沟通～</span>
                    <p>我们会对您的电话严格保密，请保持电话畅通。<br />公休假日可能会顺延，请您耐心等候。</p>
                    <em class="xxx" @click="konwbtn">我知道了</em>
                </div>
            </div>
        </div>
        <loading :loadingState="loadingState" />
    </div>
</template>

<script>
    import Swiper from 'swiper'
    import { mapGetters } from 'vuex'
    import httpApi from '@/api/index'

    import loading from "@/components/loading.vue";
    export default {
        data() {
            return {
                promptshow: false,
                contacts: '',
                contactsPhone: '',
                detail: null,
                loadingState: true
            }
        },
        created() {
            this.getDetail(this.$route.query.id);
        },
        methods: {
            getImage(url) {
                return this.baseApi + url;
            },
            getDetail(id) {
                httpApi.gethouseDetail(id).then(res => {
                    if (res.code == 0) {
                        this.detail = res.data;
                        this.detail.bannerUrl = res.data.bannerUrl.split("###");
                        this.detail.layout = res.data.layout.split("###");
                        this.getSwiper();
                    }
                    this.loadingState = false;
                })
            },
            getSwiper() {
                setTimeout(() => {
                    new Swiper('.swiper-container', {
                        loop: true,
                        autoplay: {
                            delay: 3000,
                            stopOnLastSlide: false,
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            dynamicBullets: true,
                            dynamicMainBullets: 2,
                            clickable: true,
                        },
                    })
                }, 500)
            },
            konwbtn() {
                this.promptshow = false
                this.$router.go(-1)
            },
            close() {
                this.promptshow = false
            },
            save() {
                if (!this.contacts) {
                    return this.$message.error('请输入您的姓名')
                }
                if (!/^1[0-9]{10}$/.test(this.contactsPhone)) {
                    return this.$message.error('请输入手机号')
                }
                apply({
                    contacts: this.contacts,
                    contactsPhone: this.contactsPhone,
                }).then(res => {
                    if (res.success) {
                        this.promptshow = true
                        this.$message.success('保存成功')
                    }
                })
            },
        },
        name: "PlaceOrderView",
        components: {
            loading
        },
        computed: {
            ...mapGetters(['baseApi'])
        },
    }
</script>
<style lang="scss" scoped>
    @import "src/assets/css/house-detail";
</style>